<template>
	<view class="modules">
		<u-checkbox-group :value="allCheckedList" placement="column" @change="checkboxChange">
			<view class="module" v-for="(item,index) in list" :key="index" @tap="itemToDetail(item)">
				<view class="module-header flex_between_center">
					<text class="module-header-title">{{item.prodName||''}}</text>
					<text class="module-header-state">{{item.status|filter_status}}</text>
				</view>
				<view class="module-content">
					<view class="module-content-line">
						<text class="line-title">客户姓名</text>
						<text>{{item.takePeople||''}}</text>
					</view>
					<view class="module-content-line">
						<text class="line-title">客户地址</text>
						<text>{{item.address}}</text>
					</view>
					<view class="module-content-line">
						<text class="line-title">联系电话</text>
						<text>{{item.mobile||''}}</text>
					</view>
					<view class="module-content-line">
						<text class="line-title">购买数量</text>
						<text>{{item.num||''}}{{item.units||''}}</text>
					</view>
					<view class="module-content-line">
						<text class="line-title">预约时间</text>
						<text>{{item.deliveryTime||''}}</text>
					</view>
					<view class="module-content-line flex_between_center" v-if="checkable" @tap.stop.prevent>
						<view class="checkbox-wrap" hover-class="checkbox-wrap--hover">
							<u-checkbox :name="item.id" label="勾选" size="36rpx" labelSize="24rpx" labelColor="#B5B5B5"
								activeColor="#276AEE" iconSize="0rpx" shape="circle"></u-checkbox>
						</view>
						<u-button :text="buttonText" type="primary" size="mini" shape="circle" color="#276AEE"
							:customStyle="{width:'176rpx',height:'70rpx',margin:'0rpx'}"
							@tap.stop.prevent="itemClick($event,item)"></u-button>
					</view>
				</view>
			</view>
		</u-checkbox-group>

		<view class="modules-fixed flex_start_center" v-if="checkable">
			<u-checkbox-group>
				<u-checkbox :checked="allChecked" name="all" label="全选" size="40rpx" labelSize="20rpx" labelColor="#000"
					activeColor="#276AEE" iconSize="0rpx" shape="circle" @change="allCheckedChange"></u-checkbox>
			</u-checkbox-group>
			<u-button :disabled="!allCheckedList.length" :text="buttonText" type="primary" shape="circle" color="#276AEE"
				@tap.stop.prevent="batchClick"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			// 是否可勾选
			checkable: Boolean,
			// 按钮显示文本
			buttonText: {
				type: String,
				default: '派送'
			},
		},
		data() {
			return {
				allCheckedList: [],
				allChecked: false,
			}
		},
		filters: {
			filter_status(val) {
				switch (val) {
					case 0:
						return '已下单'
						break
					case 2:
						return '进行中'
						break
					case 1:
						return '已完成'
						break
					default:
						return ''
						break
				}
			}
		},
		methods: {
			clearChecked() {
				this.allChecked = false
				this.allCheckedList = []
			},
			itemToDetail(item) {
				this.$goToPage(`/pagesMall/waterOrder/orderDetail?id=${item.id}`)
			},
			itemClick(e, item) {
				const that = this
				uni.showModal({
					title: '提示',
					content: `确定${this.buttonText}本订单？`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$emit('itemClick', item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			batchClick() {
				// 过滤
				let isList = this.list.map(item => item.id)
				this.allCheckedList = this.allCheckedList.filter(item => isList.includes(item))

				const that = this
				uni.showModal({
					title: '提示',
					content: `确定${this.buttonText}已选择的订单？`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$emit('batchClick', that.allCheckedList)
							that.allCheckedList = []
							that.allChecked = false
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			checkboxChange(e) {
				this.allCheckedList = e
				this.allChecked = this.allCheckedList.length === this.list.length
			},
			allCheckedChange(e) {
				this.allChecked = e
				if (e) {
					this.allCheckedList = this.list.map(item => item.id)
				} else {
					this.allCheckedList = []
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modules {
		padding: 40rpx 30rpx;

		.module {
			margin-top: 20rpx;
			padding: 0 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.module-header {
				padding: 36rpx 0;
				font-size: 30rpx;
				line-height: 1;
				border-bottom: 1px solid #E4E4E4;

				.module-header-title {
					color: #151413;
				}

				.module-header-state {
					color: #276AEE;
				}
			}

			.module-content {
				padding-top: 20rpx;
				padding-bottom: 20rpx;

				.module-content-line {
					padding: 10rpx 0;
					font-size: 24rpx;
					color: #000000;
					box-sizing: border-box;

					display: flex;
					justify-content: space-between;
					gap: 30rpx;

					.line-title {
						flex: 0 0 auto;
						width: 120rpx;
					}

					.checkbox-wrap {
						width: 100%;
						border-radius: 8rpx;

						&.checkbox-wrap--hover {
							background-color: #f9f9f9;
						}

						::v-deep.u-checkbox {
							width: 100% !important;

							>text {
								width: 100% !important;
								line-height: 70rpx !important;
							}
						}
					}

					::v-deep.u-button {
						>text {
							font-size: 26rpx !important;
						}
					}
				}
			}

			&:first-child {
				margin-top: 0;
			}
		}
	}

	.modules-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		box-shadow: 0rpx -2rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		box-sizing: border-box;

		gap: 58rpx;

		::v-deep.u-checkbox-group {
			.u-checkbox {
				flex-direction: column !important;
				gap: 15rpx;

				.u-checkbox__icon-wrap {
					margin: 0;
				}
			}
		}
	}
</style>
